<!-- 新建样品里的客户选择组件 -->
<template>
  <div >
    <van-popup
      safe-area-inset-bottom
      v-model="show"
      position="left"
      :style="{ height: '100%', width: '80%' }"
    >
      <van-nav-bar
        class="nav"
        title="我的客户"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
      <div style="height:50px"></div>
      <!-- 搜索区域 -->
      <van-search
        show-action
        id="searchInput"
        placeholder="请输入客户名称"
        @search="search"
        v-model="queryParam.cCusName"
        @clear="clear"
      >
      <div slot="action" @click="onSearch" style="color: #939090">搜索</div>
      </van-search>

      <div class="outerBox" style="">

        <van-list
        :immediate-check="immediateCheck"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoading"
        >
          <div class="ul">
            <div
              class="ckbxcli"
              @click="customerChoice(item)"
              v-for="(item, index) in data"
              :key="index"
            >
              <div style="text-align: left;">
                <van-row style="margin: 5px auto">
                  <van-col span="20">
                    <p style="padding-left: 20px;font-size: 14px;font-weight: bold">{{ item.cCusName }}</p>
                  </van-col>
                  <van-col span="4">
                    <p>
                      <van-tag v-if="item.cCusType === -1" plain  type="primary">备案中</van-tag>
                      <van-tag v-else-if="item.cCusType === 0" plain  type="primary">潜在</van-tag>
                      <van-tag v-else-if="item.cCusType === 1" plain  type="primary">正式</van-tag>
                      <van-tag v-else-if="item.cCusType === 2" plain  type="primary">休眠</van-tag>
                      <van-tag v-else-if="item.cCusType === 3" plain  type="primary">待转正</van-tag>
                    </p>
                  </van-col>
                </van-row>
                <van-row style="margin: 5px auto">
                  <van-col>
                    <p style="padding-left: 20px">客户编码：<span>{{ item.cCusCode }}</span></p>
                  </van-col>
                </van-row>
                <van-row style="margin: 5px auto">
                  <van-col span="11">
                    <p style="padding-left: 20px">备案人：<span>{{ item.RealName }}</span></p>
                  </van-col>
                  <van-col span="13">
                    <p>备案时间：{{ timeFormat(item.CreateTime,'YYYY-MM-DD HH:mm') }}</p>
                  </van-col>
                </van-row>

              </div>
            </div>
          </div>
        </van-list>
        <div v-if="isSearchUser" class="search-none">
          <img src="../assets/search.png" alt="">
          <h4 style="color:#6C6C6C;margin-top:5px">客户检索</h4>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
// import PaginationCom from "@/components/PaginationCom.vue";
import {
  Col,
  Cell,
  CellGroup,
  Picker,
  Popup,
  Search,
  NavBar,
  Field,
  // Pagination
} from "vant";

export default {
  props: {
    isAllData: { default: false, type: Boolean } // 是否查询全部数据
  },
  components: {
    // PaginationCom,
    // "van-pagination": Pagination,
    "van-nav-bar": NavBar,
    "van-picker": Picker,
    "van-popup": Popup, //弹层
    "van-search": Search, //搜索
    "van-field": Field,
    "van-col": Col,
    "van-cell": Cell,
    "van-cell-group": CellGroup
  },
  data() {
    return {
      immediateCheck:false,
      loading: false,
      finished: false,
      selectedRowKeys: [],
      queryParam:  { cCusName:"", cCusType:null, isAllData:this.isAllData },
      pagination: {
        current: 1,
        pageSize: 10,
        Total:0,
        // showTotal: (total, range) =>
        //   `总数:${total} 当前:${range[0]}-${range[1]}`,
        // pageSizeOptions: ["15", "30", "60"], // 设置pageSize的可选值，页面可以通过下拉框进行选择
        // showSizeChanger: true
      },
      entity: {},
      judgment: true,
      data: [],
      show: false,
      Id: "",
      PageRows: 20,
      isSearchUser:false
    };
  },
  created() {
     // 组件创建的时候初始默认检索提示
     this.isSearchUser=true
  },
  methods: {
    onLoading() {
       this.loading = true; //防止第一页重复加载
      // 上拉加载
      this.pagination.current++;
      // 获取客户列表
      this.getDataList();
    },
    paginationchange(a) {
      // a:当前选中页码
      this.pagination.current = a;
      this.getDataList();
    },
    //返回
    onClickLeft() {
      this.show = false;
      // 返回时候显示检索提示
      this.isSearchUser=true
      //列表 数据重置
      this.queryParam.cCusName = ""
      this.data = []
    },
    close() {
      this.show = false;
    },
    clear() {
      this.queryParam.cCusName = ""
    },
    onSearch() {
      if (this.queryParam.cCusName) {
        this.search(this.queryParam.cCusName)
      } else {
        this.search
      }

    },
    //搜索
    search(value) {

      this.isSearchUser=false
       this.queryParam.cCusName = value
      // this.queryParam.Condition = "cCusName";
       this.pagination.current=1
      this.data=[]
      this.loading=true
      this.finished=false
      this.getDataList();
    },
    customerChoice(item) {
      console.log(item);
      this.$emit("customerChoice", item);
      this.show = false;
    },
    // 获取客户列表
    getDataList() {
      console.log(this.isAllData)
      this.http
        .post(
          "/CustomerManagement/CustomerInfo/GetDataListForCustomerInfoRetrieval",
          {
            PageIndex: this.pagination.current,
            PageRows: 10,
            SortField: "cCusCode",
            SortType: "desc",
            Search: this.queryParam,
            // ...this.filters
          }
        )
        .then(resJson => {
           if (resJson.Success) {
            // 赋值总条数
            this.pagination.Total = resJson.Total;
            if (resJson.Data.length == 0 || resJson.Data == null) {
              // 停止加载
              this.loading = false;
              // 数据全部加载完成
              this.finished = true;
            }
            //  // 上拉加载
            // this.pagination.current++;
            // 有数据 赋值列表 加载状态结束
           this.data=this.data.concat(resJson.Data)
            this.loading = false;
            // 如果list长度大于等于总数据条数，数据全部加载完成
            if(this.data.length >= resJson.Data.Total){
              this.finished = true;//结束加载
              this.loading=false
            }


          } else {
            this.$toast.fail(resJson.Msg);
            // 停止加载
            this.loading = false;
            // 结束加载
            this.finished = true;
          }
        });
    },
    init() {
      this.show = true;
    },
    openForm() {
      this.init();
      // this.getDataList();
    }
  }
};
</script>

<style scoped>
.search-none{
  height:70%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.outerBox {
  height: calc(100vh - 120px);
  padding-bottom: 50px;
  box-sizing: border-box;
  overflow: auto;
}

.ckbxcli {
  border: 1px solid Gainsboro;
  width: 95%;

  text-align: center;
  margin-left: 2%;
  margin-top: 10px;
  padding-right: 0px;
  padding-left: 0px;
  padding-bottom: 2px;
  cursor: pointer;
  padding-top: 6px;
  list-style-type: none;
  display: inline-block;
}
.ul {
  /* margin-top: 20px; */
}
.nav {
  position: fixed !important;
  width: 100%;
}
</style>
